<template>
    <div class="container">
        <div class="top">告警信息</div>
        <div class="header">
            <div class="form-container">
                <el-form :model="queryParams" label-width="148px" class="demo-ruleForm">
                    <el-form-item label="机器人/预处理端名称：" prop="robotName">
                        <el-input placeholder="请输入机器人/预处理端名称" v-model="queryParams.robotName"></el-input>
                    </el-form-item>
                    <el-form-item label="告警描述：" prop="alarminfo">
                        <el-input placeholder="请输入告警描述" v-model="queryParams.alarminfo"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style=" 
                                          background: linear-gradient(0deg, #123150, #1C97B1);
                                          border-radius: 2px;
                                          border: 1px solid #1560AC;
                                          color: #fff;
                                          width:80px; 
                                          height: 37px;
                                          margin: 20px 0 0 -92px" @click="onSearch">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style=" 
                                          background: linear-gradient(0deg, #081D32, #1DB27C);
                                          border-radius: 2px;
                                          border: 1px solid #439B2B;
                                          color: #fff;
                                          width:80px;
                                          height: 37px;
                                          margin: 20px 0 0 -140px " @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="table">
            <div class="right">
                <el-button type="primary" :disabled="multiple" style=" 
                    color: #fff;
                    width:80px; 
                    height: 37px;  
                    background: linear-gradient(0deg, #4C0820, #0D1538);
                    border-radius: 2px;
                    border: 1px solid #942028;
                    margin: 12px 0 0 0" @click="deleteHandle">删除</el-button>
            </div>
            <el-table border :data="tableData" :row-key="(row) => { return row.id }" @selection-change="handleSelectionChange"
                :cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
                :row-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
                :header-cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED', fontSize: '14px', }"
                style="color:#EDEDED; border-color: #1560AC;width:100%;">
                <el-table-column type="selection" reserve-selection width="55" align="center">
                </el-table-column>
                <el-table-column prop="robotName" label="机器人/预处理端名称" align="center">
                </el-table-column>
                <el-table-column prop="alarminfo" label="告警描述" align="center" icon="el-icon-search">
                    <template slot-scope="scope">
                        <div v-if="scope.row.alarmType == 0" class="alarmInfos">{{ scope.row.alarminfo }}<i
                                class="el-icon-top"></i>
                        </div>
                        <div v-if="scope.row.alarmType == 1">{{ scope.row.alarminfo }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="alarmtime" label="告警时间" align="center" width="170">
                </el-table-column>
                <el-table-column align="center" width="280" prop="status">
                    <template slot="header">
                        <span>状态</span>
                        <el-badge :value="untreatedTotal" class="item">
                            <i class="el-icon-bell" style="font-size:18px;margin-left:8px;"></i>
                        </el-badge>
                    </template>
                    <template slot-scope="scope">
                        <el-button class="btn1" size="mini" v-if="scope.row.status == 0"
                            @click="changeStatus(scope.row)">未处理</el-button>
                        <el-button class="btn2" size="mini" v-if="scope.row.status == 1">已处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="alarmList" />
    </div>
</template>

<script>
import { getAlarmList, DeleteWarn, ChangeState } from '@/api/cyRobot/alarm'

export default {
    name: 'alarm',
    data() {
        return {
            //分页相关
            total: 0, //总条数
            //时间选择器
            valueTime: '',
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            queryParams: {
                robotName: '',
                alarminfo: '',
                pageNum: 1,
                pageSize: 4
            },
            centerDialogVisible: false,
            tableData: [],
            value1: [],
        };
    },
    mounted() {
        this.alarmList()
    },
    computed: {
        untreatedTotal() {
            return this.tableData.filter(item => item.status == 0).length
        },
    },
    methods: {
        changeStatus(row) {
            ChangeState(row.id).then(response => {
                if (response.code == 200) {
                    this.alarmList()
                }
            })
        },
        //告警信息列表
        alarmList() {
            getAlarmList(this.queryParams).then(response => {
                this.tableData = response.rows
                this.total = response.total
            })
        },
        //搜索操作
        onSearch() {
            this.alarmList()
        },
        //重置操作
        reset() {
            this.queryParams.robotName = null
            this.queryParams.alarminfo = null
            this.alarmList()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            if (selection.length != 0) {
                this.single = selection.length != 1
                this.multiple = false
                this.ids = selection.map(item => item.id)
            } else {
                this.multiple = true
            }
        },
        //删除操作
        deleteHandle() {
            const id = String(this.ids.splice(','));//每次删除之前先将ids数组转化为逗号拼接的字符串;
            this.$confirm(`是否删ID为${id}的数据?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DeleteWarn(id).then(response => {
                    if (response) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.alarmList()//删除成功刷新列表
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
    }
}
</script>

<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

.container {
    background-color: #123150;
    height: calc(100vh - 40px);
    width: 100%;

    .top {
        width: 100%;
        height: 50px;
        text-align: left;
        line-height: 50px;
        background-color: #123150;
        border: 1px solid #1560AC;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        // margin: 0 0 0px 10px;
        //padding-left: 20px;
        border-left: none;
        border-top: none;
    }

    .header {
        width: 98%;
        margin: 10px 0 0 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;

        ::v-deep .el-form-item__label {
            margin: 20px 0px 0 0px;
            font-size: 13px;
            color: #b6b7be;
        }

        .el-form {
            width: 85%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;

            ::v-deep .el-textarea__inner {
                background-color: #123150;
                border: 1px solid #1560AC;
                margin: 30px 0 0 7px;
                height: 100px;
            }

            ::v-deep .el-input--medium .el-input__inner {
                color: #C1C1C1;
            }

            ::placeholder {
                font-size: 13px;
                color: #b6b7be;
            }

            ::v-deep .el-form-item__label {
                width: 148px !important;
            }
        }

        .el-input {
            width: 192px;
            height: 15px;
            margin: 20px 20px 0 10px;
        }

        ::v-deep .el-input__inner {
            border: 1px solid #1560AC;
            background-color: #123150;
        }

        .dataTimeBox {
            ::v-deep .el-input__inner {
                margin-top: 20px;
                height: 38px;
                width: 250px;
            }

            ::v-deep .el-range-editor .el-range-input {
                background-color: #123150;
            }

        }
    }

    .right {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    .table {
        width: 100%;
        // margin: 20px 0 0 0;
        padding-left: 5px;
        padding-right: 5px;

        //最底下的线条
        ::v-deep .el-table::before,
        .el-table--group::after,
        .el-table--border::after {
            background-color: #1560AC;
        }

        //表体颜色
        ::v-deep .el-table__body-wrapper {
            background-color: #123150;
        }

        //多选框
        ::v-deep .el-checkbox__inner {
            background: #123150;
            border-radius: 1px;
            border: 1px solid #1560AC;
        }

        .el-table__fit {
            background-color: #123150;
        }

        ::v-deep .el-button--default {
            width: 40px;
            height: 20px;
        }

        ::v-deep .el-button--danger {
            width: 50px;
            height: 20px;
        }

        ::v-deep .el-button--primary {
            width: 40px;
            height: 20px;
        }

        .status1Btn1 {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
        }

        .status1Btn2 {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #e40106;
        }

        .statusBtn1 {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
        }

        .statusBtn2 {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #d2a708;
        }

        .btn1 {
            width: 80px;
            height: 25px;
            color: #fff;
            background: linear-gradient(0deg, #4C0820, #0D1538);
            border-radius: 2px;
            border: 1px solid #942028;
        }

        .btn2 {
            width: 80px;
            height: 25px;
            color: #848484;
            background: linear-gradient(0deg, #0D1538, #444545);
            border-radius: 2px;
            border: 1px solid #4B4B4B;
        }

        .alarmInfos {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 13px;
            color: #FFD800;
        }

        ::v-deep .el-badge__content.is-fixed {
            top: 6px;
            right: 2px;
        }

        ::v-deep .el-badge__content {
            border-radius: 9px;
            font-size: 10px;
            height: 14px;
            line-height: 14px;
            padding: 0 4px;
        }

        ::v-deep .el-table__body-wrapper {
            background-color: #123150;
        }
    }

    ::v-deep .el-dialog:not(.is-fullscreen) {
        margin-top: 20vh !important;
    }

    .dialogBox {
        ::v-deep .el-form-item__label {
            width: 105px !important;
        }

        ::v-deep .el-input--medium .el-input__inner {
            margin-bottom: 18px;
        }

        ::v-deep .el-input--medium .el-input__inner {
            border-color: #1560AC;
        }


        .dialog-footer {
            .btn1 {
                width: 60px;
                height: 30px;
                margin-right: 10%;
            }

            .btn2 {
                width: 60px;
                height: 30px;

            }
        }
    }

    .pageBtn {
        width: 99%;
        height: 60px;
        display: flex;
        justify-content: end;
        align-items: center;
    }
}
</style>